<template>
    <div class="gedans">
      <p>
        <span>推荐歌单</span>
        <van-icon name="arrow" class="ic"/>

      </p>
      <ul>
        <li v-for="(key,item) in pic">
          <span><img alt="" :src=pic[item]>

          </span>
          <br>
    <span class="text">
          {{names[item]}}
          </span>
          <p>

            <span><img src="../../img/erji.png" alt="">
                  <span>{{playCounts.length<9?Math.ceil(playCounts[item]/10000)+'万':Math.ceil(playCounts[item]/100000000)+'亿'}}</span>

            </span>
          </p>
        </li>
      </ul>
    </div>
</template>

<script>

    export default {
        name: "gedan",
        data(){
          return{
            // textarr:['[VIP 专享] 一周新歌推荐啊啊啊啊啊啊啊啊啊','秋日流浪 · 我们一起去宇宙的公园散步',
            // '这些歌比  《说散就散》  《体面》更扎心啊啊啊啊','有一种演唱会叫刘德华（live）','毛不易红心红心','翻唱 | 不够的不够电台原曲'],
            // imgarr:[require('../../img/gd1.png'),require('../../img/gd2.png'),require('../../img/gd3.png'),
            //   require('../../img/gd4.png'),require('../../img/gd5.png'),require('../../img/gd6.png')]
            names:[],
            pic:[],
            playCounts:[],
          }
        },
      created(){
        this.$http.get('http://localhost:3000/personalized?limit=6')
          .then((res)=>{
            for(let i = 0; i < 6; i ++){
              this.names.push(res.data.result[i].name);
              this.pic.push(res.data.result[i].picUrl);
              this.playCounts.push(res.data.result[i].playCount);
            }
          })
      }
    }
</script>

<style lang="scss">
  *{
    margin: 0px;
    padding: 0px;
  }
.gedans{
  box-sizing: border-box;
  padding: 60px 15px 0 15px;
  p{
    box-sizing: border-box;
    padding-bottom: 40px;
    font-size: 50px;
    font-weight: bold;
    span{
      vertical-align: middle;
    }
    .ic{
      width: 27px;
      vertical-align: middle;
    }
  }
  ul{

    font-size: 0;

    li{
     width: 33.3333333%;
      letter-spacing: 0;
      list-style: none;
      position: relative;
      display: inline-block;
      font-size: 30px;
      padding-bottom: 60px;
      box-sizing: border-box;
      .text{
        box-sizing: border-box;
        padding-left: 15px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        height: 95px;
        width: 340px;
        font-size: 35px;
      }
      img{
        width: 395px;
        height: 400px;
      }
      p{
        display: inline-block;
        position: absolute;
        top:0;
        right: 30px;
        color: white;
        font-size: 30px;

        span{
          vertical-align: middle;

          display: inline-block;
        }
        img{
          width: 40px;
          height: 40px;
          vertical-align: middle;


        }
      }
    }
  }
}
</style>
